<template>
  <div class="op-btn">
    <el-button
      v-for="item in btns"
      :key="item.url"
      :type="item.type"
      :icon="item.icon"
      @click="custMethod(item.url)"
    >{{item.name}}</el-button>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import mixinBtns from "@/assets/minxin/op-bnts";
import { getMenuByPath } from "@/assets/utils/menu-util";
import menuApi from "@/api/system/menu";

export default {
  mixins: [mixinBtns],
  props: ["add", "mod", "del"],
  name: "head-btns",
  computed: {
    ...mapState("d2admin/page", ["current"])
  },
  data() {
    return { btns: [] };
  },
  async mounted() {
    await this.loadPageBtns();
  },
  methods: {
    async loadPageBtns() {
      let menu = getMenuByPath(this.$route.path);
      // {url: "add", name: "添加", icon: "fa fa-plus", type: "", color: ""},
      // {url: "mod", name: "修改", icon: "fa fa-edit", type: "", color: ""},
      // {url: "del", name: "删除", icon: "fa fa-trash", type: "", color: ""}
      let res = await menuApi.child({ type: "op", pid: menu.id });
      this._initBtn(res.data);
    },
    setBtnList(btns) {
      this._initBtn(btns);
    },
    _initBtn(btns) {
      this.btns=[];
      (btns||[]).forEach(item => {
        if (!item.url || !item.visible) {
          return false;
        }
        this.btns.push(item);
      });
      this.$emit("load", this.btns);
    }
  }
};
</script>

<style lang="scss">
.op-btn {
  min-height: 40px;
  padding-top: 7.5px;

  .el-button + .el-button {
    margin: 0;
  }

  .el-button {
    padding: 7px 10px;
    margin: 0 5px !important;
    background: #f4f4f4;
    float: right;

    .fa {
      padding: 0 3px;
    }
  }
}
</style>
